<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet WMS Example</title>
    <!-- Leaflet CSS and JS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <!-- Proj4js and Proj4Leaflet -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.5/proj4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>

</head>

<body>

<div id="map" style="width: 100%; height: 500px;"></div>

<script>
    var crs4490 = new L.Proj.CRS(
        'EPSG:4490',
        '+proj=longlat +ellps=GRS80 +no_defs',
        {
            origin: [-180, 90],
            resolutions: [
                1.406250026231578, 0.703125013115789, 0.3515625065578945,
                0.17578125327894775, 0.08789062663947399, 0.043945313319736994,
                0.021972656659868472, 0.010986328329934226, 0.005493164164967124,
                0.0027465820824835504, 0.0013732910412417797, 6.866455206208899e-4,
                3.433227603104438e-4, 1.716613801552224e-4, 8.583069007761132e-5,
                4.291534503880566e-5, 2.1457672519402802e-5, 1.0728836259701401e-5,
                5.364418129850712e-6, 2.682209064925356e-6, 1.341104532462678e-6,
            ],
            bounds: L.bounds(L.point([-180, -90]), L.point([180, 90]))
        }
    );

    // 初始化地图并设置中心和缩放级别
    var map = L.map('map',{
        crs: L.CRS.EPSG4326
    }).setView([32.9708, 119.4645], 10); // 这里的[0, 0]是地图的初始中心，2是初始的缩放级别


    // 添加GeoWebCache WMS图层
    var wmsLayer = L.tileLayer.wms("http://218.2.231.242:18081/geowebcache/service/wms?", {
        layers: 'Image2022',
        format: 'image/jpeg',
        transparent: true,
        version: '1.1.1',
        crs:crs4490

    }).addTo(map);

    // 加载本地 TMS 切片。请根据你的文件路径进行修改
    L.tileLayer('http://localhost:8080/geoserver/gwc/service/tms/1.0.0/jiangsu%3A320205_202005@EPSG%3A4326@pn/{z}/{x}/{y}.png', {
        maxNativeZoom: 16,
        tms: true,
        opacity: 1 // 切片的透明度，你可以根据需要进行调整
    }).addTo(map);

</script>

</body>

</html>
